<template>
    <div class="cover">
      <!--<div class="ecolis_st">-->
        <!--<div class="econt_cen">-->
          <!--<ul class="clearfix">-->
            <!--<li><router-link to="/spellingList"><img src="../../../static/img/index/woyao.png"></router-link></li>-->
            <!--<li><router-link to="/spikeIndex"><img src="../../../static/img/index/newpeple.png"></router-link></li>-->
            <!--<li><router-link to="/bargainList"><img src="../../../static/img/index/haiwai.png"></router-link></li>-->
          <!--</ul>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="news_banner">-->

        <!--<div class="news_banner_left">-->
          <!--<router-link to="/Wholesale">-->
            <!--<div class="news_banner_left">-->
              <!--<img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/index/lin.jpg"/>-->
            <!--</div>-->
          <!--</router-link>-->
        <!--</div>-->
        <!--<div class="news_banner_right">-->
          <!--<router-link to="/Specialty">-->
          <!--<img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/index/qiye.png"/>-->
          <!--</router-link>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="news_banner">-->
        <!--<div class="news_banner_left">-->
            <!--<div class="news_banner_left">-->
              <!--<router-link to="/agentList">-->
              <!--<img src="../../assets/images/index/30.png"/>-->
              <!--</router-link>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="news_banner_right" @click="Agent()" >-->
          <!--<img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/index/zaomu.png"/>-->
        <!--</div>-->
      <!--</div>-->
      <div class="eco_four bgfff">
		
		
					<div class="abs">
						<router-link to="/seckill" tag="div" class="seckill">
							<p>限时秒杀</p>
						</router-link>
						
						<router-link to="/ninePieceIndex" tag="div" class="seckill">
							<p>9.9包邮</p>
						</router-link>
						
						<router-link to="/groupBookingIndex" tag="div" class="seckill">
							<p>拼团</p>
						</router-link>
						
						<router-link to="/sTIndex" tag="div" class="seckill">
							<p>领券</p>
						</router-link>
					</div>
          <section class="khfxPane comdList">
            <v-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
              <ul id="goods-list" class="goods_list">
                <li v-for="(val, key) in shopList" @click="shopLink(val)" :key="key">
                  <div class="good_img">
                    <img :src="val.product_image_url"/></div>
                  <p class="title">{{val.name}}</p>
                  <div class="pce_sum">
                    <p class="price"><span>￥</span>{{val.price}} </p>
                    <p class="price1"><span>已售：</span>{{val.sales_volume}} </p>
                  </div>
                </li>
              </ul>
             <div class="loading loadmore-icon" v-show="showlaoding">
                上拉加载跟多
              </div>
            </v-loadmore>
          </section>
      </div>
      <!--回到顶部-->
    <goTop></goTop>

    </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  import { Loadmore } from 'mint-ui'
  import goTop from '@/pages/foot/goTop'
    export default {
      name: "cover",
      data() {
        return {
          isshow: false,
          shopList: [], // 上拉更多的数据存放数组
          showlaoding: false, //是否显示loading效果
          page:1,
          allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
          scrollMode:"auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
          wrapperHeight: 0,
          courrentPage: 0,
        }
      },
      components: {
        'v-loadmore':Loadmore,goTop
      },
      methods: {
      //跳转商品详情页
      shopLink(val) {
        this.$router.push({
          name: '商品详情',
          query: {id: val.id}})
      },
        _Toast:function(){
          Toast({
            message: '生态村：暂未开放',
            position: 'bottom',
            duration: 5000,
            className:'toast'
          });
        },
        Agent:function () {
          this.$router.push({path: '/Import'})
        },
        loadBottom:function() {
			console.log('上拉');
          // 上拉加载
          this.more();// 上拉触发的分页查询
        },

        //获取商品
        async loadPageList(){
          this.shopList=[]
          let params = {
            pageNum:this.page,
            pageSize:10,
            goodName:'',
          };
           const res = await this.$axios.post(this.$api.shopListData, params);
           if (res.success) {
            // 是否还有下一页，加个方法判断，没有下一页要禁止上拉
             this.isHaveMore(res.data.nextPage);
            this.shopList = res.data.list
            this.$nextTick(function () {
              // 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，
              // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，
              // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好
              this.scrollMode = "touch";
            });
            this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位
            this.showlaoding=true
          }else {
             this.$toast(res.msg);
           }
        },
        async more(){
          // 分页查询
          this.page = parseInt(this.page) + 1;
          let params = {
            pageNum:this.page,
            pageSize:10,
          };
          const res = await this.$axios.post(this.$api.shopListData, params);
          if (res.success) {
            this.shopList = this.shopList.concat(res.data.list);
            this.isHaveMore(res.data.nextPage);
            this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
            this.showlaoding=true
          }else {
            this.$toast(res.msg);
          }
        },
        isHaveMore:function(isHaveMore){
          // 是否还有下一页，如果没有就禁止上拉刷新
          this.allLoaded = true; //true是禁止上拉加载
          if(isHaveMore){
            this.allLoaded = false;
          }
        },

      },
      mounted() {
        this.loadPageList();  //初次访问查询列表
      }

    }
</script>

<style scoped>
  @import '../../assets/css/index.css';
  .seckill{
	  /* height: 70px; */
	  color: #007AFF;
	  line-height: 70px;
	  width: 100%;
  }
  .toast{
    bottom:0.8rem!important;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
  }
  .main-body {
    overflow: scroll; 
  }
  /* 
	.khfxPane{
		overflow: scroll; 
		min-height: 500px;
	} */
</style>
